<script setup lang="ts">
import { useMessage, NButton } from 'naive-ui'
import { login, sendCode, register } from '@/apis/user'

definePageMeta({
  layout: 'no-bottom'
})

const message = useMessage()
const { text: codeText, flag, timer } = useTimer('发送')
const userStore = useUserStore()
const imageStore = useImageStore()
const router = useRouter()
const toggleForm = ref(false)
const formLogin = reactive({ account: '', password: '' })
const fromRegister = reactive({ username: '', code: '', password: '' })

function handleToggleForm() {
  toggleForm.value = !toggleForm.value
}

const handleLogin = async () => {
  if (!formLogin.account) {
    message.warning('请输入邮箱号！')
    return
  }

  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(formLogin.account)) {
    message.warning('邮箱格式有误！')
    return
  }

  if (!formLogin.password) {
    message.warning('请输入密码！')
    return
  }
  try {
    const fd = new FormData()
    fd.append('username', formLogin.account.trim())
    fd.append('password', formLogin.password.trim())
    const { code, data, message: msg } = await login(fd)
    if (code === 20000) {
      userStore.setUserInfo(data)
      router.push('/user')
    } else {
      message.warning(msg)
    }
  } catch (error) {
    console.warn(error)
  }
}

const onSendCode = async () => {
  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  if (!fromRegister.username.trim()) {
    message.warning('请输入邮箱号！')
    return
  }
  if (!reg.test(fromRegister.username)) {
    message.warning('邮箱格式有误！')
    return
  }

  try {
    const { code, message: msg } = await sendCode(fromRegister.username)
    if (code === 20000) {
      timer(60)
      message.success('验证码已发送，请注意查收')
    } else {
      message.warning(msg)
    }
  } catch (error) {
    console.warn(error)
  }
}

const handleRegister = async () => {
  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  if (!fromRegister.username.trim()) {
    message.warning('请输入邮箱号！')
    return
  }

  if (!reg.test(fromRegister.username)) {
    message.warning('邮箱格式有误！')
    return
  }

  if (fromRegister.code.trim().length !== 6) {
    message.warning('请输入6位验证码！')
    return
  }

  if (!fromRegister.password.trim()) {
    message.warning('请输入密码！')
    return
  }

  try {
    const { code, message: msg } = await register(fromRegister)
    if (code === 20000) {
      message.success('注册成功！')
      fromRegister.username = ''
      fromRegister.code = ''
      fromRegister.password = ''
    } else {
      message.warning(msg)
    }
  } catch (error) {
    console.warn(error)
  }
}
</script>

<template>
  <client-only>
    <div
      class="login flex h-screen items-center justify-center bg-cover bg-center bg-no-repeat"
      :style="{ backgroundImage: `url(${imageStore.pageList.login})` }"
    >
      <div
        class="box relative w-96 overflow-hidden rounded-3xl border-2 border-solid border-white max-md:w-80"
        :class="{ 'h-[500px]': toggleForm }"
      >
        <div
          class="form h-full w-full rounded-3xl bg-[hsla(0,0%,10%,0.1)] py-10 px-6 text-sm text-white backdrop-blur transition-all duration-500"
        >
          <h3 class="text-center text-3xl">Login</h3>
          <login-input
            v-model:value="formLogin.account"
            class="my-10"
            icon="ph:user-duotone"
            placeholder="Email"
          />
          <login-input
            v-model:value="formLogin.password"
            class="mb-5"
            type="password"
            icon="ph:lock-key-bold"
            placeholder="Password"
          />
          <!-- <div class="flex justify-end">
            <nuxt-link to="">Forgot Password?</nuxt-link>
          </div> -->
          <div class="pt-10">
            <button class="btn-grad" @click="handleLogin">Login</button>
          </div>
          <div class="pt-9 text-center">
            <span>Don't have an account? </span>
            <button @click="handleToggleForm">Register</button>
          </div>
        </div>
        <div
          class="form absolute top-0 left-96 h-full w-full rounded-3xl bg-[hsla(0,0%,10%,0.1)] py-10 px-6 text-sm text-white backdrop-blur transition-all duration-500"
          :style="{ left: toggleForm ? '0' : '' }"
        >
          <h3 class="text-center text-3xl">Register</h3>
          <login-input
            v-model:value="fromRegister.username"
            class="my-10"
            icon="ph:user-duotone"
            placeholder="Email"
          />
          <login-input
            v-model:value="fromRegister.code"
            class="mb-10"
            icon="material-symbols:code-rounded"
            placeholder="Code"
          >
            <template #right-icon>
              <n-button
                size="small"
                style="background: transparent"
                secondary
                strong
                :disabled="flag"
                @click="onSendCode"
              >
                {{ codeText }}
              </n-button>
            </template>
          </login-input>
          <login-input
            v-model:value="fromRegister.password"
            class="mb-5"
            type="password"
            icon="ph:lock-key-bold"
            placeholder="Password"
          />
          <div class="pt-5">
            <button class="btn-grad" @click="handleRegister">Register</button>
          </div>
          <div class="pt-9 text-center">
            <span>Existing account! </span>
            <button @click="handleToggleForm">Login</button>
          </div>
        </div>
      </div>
    </div>
  </client-only>
</template>

<style>
.login .box .form .btn-grad {
  width: 100%;
  background-image: linear-gradient(to right, #e8cbc0 0%, #636fa4 51%, #e8cbc0 100%);
  /* margin: 10px; */
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.login .box .form .btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
</style>
